<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>检测项目列表</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="检测项目列表">
<meta name="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="../../script/js/layui/css/layui.css" media="all">
<script type="text/javascript" src="../../script/js/layui/layui.js"></script>
<script type="text/javascript" src="../../mes/js/vue.min.js"></script>
<script type="text/javascript" src="../../mes/js/vue-resource.min.js"></script>
<script type="text/javascript" src="../../script/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../../script/js/lodash.min.js"></script>
<style type="text/css">
.add-btn{margin-left:50px;}
.badProductDiv{display: none; }
.allBp{width: 350px; height: 100%; float: left; padding-left: 15px;}
.selOpt{width: 100px; height: 100%; float: left;}
.selOpt .layui-btn-container{text-align: center;padding-top: 40px;}
.selBp{width: 350px; height: 100%; float: left;}
</style>
</head>
<body id="checkItemManager">
<form class="layui-form layui-form-pane">
	<div class="layui-inline">
		<label class="layui-form-label">编号</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" id="checkNo" v-model="checkNo" />
		</div>
	</div>
	<div class="layui-inline">
		<label class="layui-form-label">检测项目</label>
		<div class="layui-input-inline">
			<input type="text" class="layui-input" id="checkItemQue" v-model="checkItemQue" />
		</div>
	</div>
	<div class="layui-input-inline">
		<button type="button" class="layui-btn" @click="searchData">查询</button>
	</div>
	<div class="layui-input-inline">
		<button type="button" class="layui-btn layui-bg-orange add-btn" @click="openCheckItemConfigWin">新增</button>
	</div>
</form>
<table class="layui-hide" id="checkItemTable" lay-filter="checkItemFilter"></table>

<div id="badProductDiv" class="badProductDiv">
	<div class="allBp">
		<table class="layui-hide" id="bpTable" lay-filter="bpFilter"></table>
	</div>
	<div class="selOpt">
	<div class="layui-btn-container">
		<button class="layui-btn layui-btn-sm layui-btn-primary" @click="optBp('selOne')">
		  <i class="layui-icon">&#xe602;</i>
		</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary" @click="optBp('unselOne')">
		  <i class="layui-icon">&#xe603;</i>
		</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary" @click="optBp('selAll')">
		  <i class="layui-icon">&#xe65b;</i>
		</button>
		<button class="layui-btn layui-btn-sm layui-btn-primary" @click="optBp('unselAll')">
		  <i class="layui-icon">&#xe65a;</i>
		</button>
	</div>
	</div>
	<div class="selBp">
		<table class="layui-hide" id="bpSelTable" lay-filter="bpSelFilter"></table>
	</div>
</div>
</body>
<div id="confirmUploadExcelDiv" style="display: none;">
        <fieldset class="layui-elem-field layui-field-title">
            <div class="layui-form-item" align="center">
                <div class="layui-inline" >
                    <button type="button" class="layui-btn layui-btn-warm" id="downloadTemplate">
                        <i class="layui-icon">&#xe601;</i>下载模板
                    </button>
                    <button type="button" class="layui-btn layui-btn-normal" id="test1">
                        <i class="layui-icon">&#xe67c;</i>上传Excel
                    </button>
                </div>
            </div>
            <div class="layui-form-item" align="center">
            	<div class="layui-inline layui-form" >
            			<input type="checkbox" name="isSampleData" id="isSampleData" value="1" title="是否为样本">
            	</div>
            </div>
            <div class="layui-form-item" align="center">
                <div class="layui-inline" >
                    <button type="button" class="layui-btn" id="confirmUpload">
                        确认上传
                    </button>
                </div>
            </div>
        </fieldset>
</div>
<iframe id="hideIframe" name="hideIframe" width="0" height="0" style="display: none"></iframe>
<script type="text/html" id="operatorBar">
	<a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
	<a class="layui-btn layui-btn-xs" lay-event="deleteData">删除</a>
	<a class="layui-btn layui-btn-xs" lay-event="graph">控制图</a>
    <a class="layui-btn layui-btn-xs" lay-event="importExcel">导入数据</a>
	<a class="layui-btn layui-btn-xs" lay-event="deleteSampleData">清除数据</a>
	{{#  if(d.GRAPH_TYPE === "P" || d.GRAPH_TYPE === "nP" || d.GRAPH_TYPE === "U" || d.GRAPH_TYPE === "C"){ }}
	<a class="layui-btn layui-btn-xs" lay-event="badproduct">不良定义</a>
	{{#  } }}
</script>
<script type="text/javascript">
var vm = new Vue({
	el: "#checkItemManager",
	data: {
		configWin: "",
		controlChartWin: "",
		checkNo:"",
		checkItemQue: "",
		tableData : [],
		badProductWin: "",
		configId: "",
		bpData: [],
		bpSelData: [],
		unselBpRow: null,
		selBpRow: null
	},
	init: function() {
		var _self = this;
		this.$nextTick(function() {
			this.$options.methods.searchData(this);
		});
	},
	methods: {
		renderTable: function(_self, data) {
			layui.use(['form','table','laydate'], function(){
				var table = layui.table;
				var laydate = layui.laydate;
				var form = layui.form;
				table.render({
					elem: '#checkItemTable'
				    ,height: 'full-60'
				    ,cols: [[ //标题栏
				       {type:'numbers',fixed:'left',title:'序号'}
				      ,{field: 'CODE', title: '编号',align:'center',width:200}
				      ,{field: 'PRODUCTNAME', title: '产品',align:'center'}
				      ,{field: 'CHECKITEMNAME', title: '检测项目',align:'center',sort:true}
				      ,{field: 'GRAPH_TYPE', title: '图类',align:'center'}
				      ,{field: 'SAMPLE_VOLUME', title: '样本容量',align:'center'}
				      ,{field: 'SPECIFICA_UPPER', title: '规格上限',align:'center'}
				      ,{field: 'TARGET_VAL', title: '目标值',align:'center'}
				      ,{field: 'SPECIFICA_LOWER', title: '规格下限',align:'center'}
				      //,{field: 'RECEMAN', title: '判异规则',align:'center',width: 90}
				      ,{field: 'UPDATETIME', title: '更新时间',align:'center',width: 145}
				      ,{fixed: 'right',title:'操作', align:'left', width: 380, toolbar: '#operatorBar'}
				    ]]
				    ,limit:50
					,limits: [10, 20, 50, 100]
				    ,data:data
				    ,page: true //是否显示分页
				});
				//监听工具条
				table.on('tool(checkItemFilter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var row = obj.data //获得当前行数据
					var layEvent = obj.event; //获得 lay-event 对应的值
					if("update" === layEvent){
						_self.openCheckItemConfigWin(row, obj);
					}
					if("graph" === layEvent){
						_self.openControlChartWin(row, obj);
					}
					if("badproduct" === layEvent){
						_self.openBadProductWin(row, obj);
					}
                    if("importExcel" === layEvent){
                        _self.openImportExcelWin(row, obj);
                    }
                    if("deleteSampleData" == layEvent){
                    	layer.confirm('是否确认清除?', function(index){
						  _self.deleteSampleData(row, obj);
						  layer.close(index);
						});
                    }
                    if("deleteData" == layEvent){
                    	layer.confirm('是否确认删除?', function(index){
						  _self.deleteData(row, obj);
						  layer.close(index);
						});
                    }
				});
			});
		},
		searchData: function(_self){
			_self = _self.target ? this : _self;
			_self.$nextTick(function() {
				this.$http.post("../../spc/ckConfig/getList",{
					checkItem : _self.checkItemQue,
					checkNo : _self.checkNo
				},{emulateJSON: true}).then(function(res){
					_self.tableData = res.body.list;
					_self.$options.methods.renderTable(_self, _self.tableData);
				});
			});
		},
		openCheckItemConfigWin: function(row){
			var _self = this;
			var url = 'checkitem_config.html';
			if(row){
				url += "?configId=" + row.CONFIGID;
			}
			layui.use(["form", "layer"], function(){
				var layer = layui.layer;
				var form = layui.form;
				_self.configWin = layer.open({
					type : 2,
					title : '检测项目配置',
					id : 'chConfig',
					shadeClose : true,
					shade : 0.8,
					area : [ '100%', '100%' ],
					content : url,
				  	cancel: function(){ 
				    	//右上角关闭回调
				    	//return false 开启该代码可禁止点击该按钮关闭
				  	},
				  	success: function(layero, index){
				  		//成功打开弹出层后回调
				  	}
				});
			});
		},
		//控制图界面
		openControlChartWin: function(row) {
			var _self = this;
			var url = 'checkitem_control_chart.html?configId=' + row.CONFIGID;
			layui.use(["layer"], function(){
				var layer = layui.layer;
				_self.controlChartWin = layer.open({
					type : 2,
					title : '控制图',
					id : 'chConfig',
					shadeClose : true,
					shade : 0.8,
					area : [ '100%', '100%' ],
					content : url,
				  	success: function(layero, index){
				  		//成功打开弹出层后回调
				  	}
				});
			});
		},
		//不良品定义
		openBadProductWin: function(row) {
			var _self = this;
			_self.configId = row.CONFIGID;
			layui.use(["layer"], function(){
				if(row){
					var layer = layui.layer;
					_self.badProductWin = layer.open({
						type : 1,
						title : '不良定义',
						id : 'badProductDefine',
						shadeClose : true,
						shade : 0.8,
						area : [ '850px', '350px' ],
						content : $("#badProductDiv"),
						btn: ['确认', '取消'],
						btnAlign: 'c',
						yes: function(index, layero) {
							_self.$nextTick(function() {
								_self.$http.post("../../spc/ckConfig/saveBadProductData",{
									configId : _self.configId,
									badProductData : JSON.stringify(_self.bpSelData)
								},{emulateJSON: true}).then(function(res){
									layer.msg(res.body.msg);
									if(res.body.result){
										layer.close(_self.badProductWin);
										_self.bpData = [];
										_self.bpSelData = [];
										_self.configId = "";
									}
								});
							});
						},
					  	success: function(layero, index){
					  		//成功打开弹出层后回调
					  		_self.getBadProductData();
					  	}
					});
				} else {
					layer.msg("该图类无需定义不良类型！");
				}
			});
		},
		renderBpTable: function(_self, data) {
			layui.use(['table'], function(){
				var table = layui.table;
				table.render({
					elem: '#bpTable'
				    ,height: 230
				    ,cols: [[ //标题栏
				       {type:'numbers',fixed:'left',title:'序号'}
				      ,{field: 'CODE', title: '编号',align:'center',sort: true, event: 'CODE'}
				      ,{field: 'NAME', title: '名称',align:'center',sort: true, event: 'NAME'}
				    ]]
					,limit: 10000
				    ,data:data
				    ,page: false //是否显示分页
				    ,done: function(res, curr, count) {
// 						_self.bpData = res.data;
					}
				});
				table.on('tool(bpFilter)', function(obj){
					_self.unselBpRow = obj.data;	//当前行数据
				});
			});
		},
		renderBpSelTable: function(_self, data) {
			layui.use(['table'], function(){
				var table = layui.table;
				table.render({
					elem: '#bpSelTable'
				    ,height: 230
				    ,cols: [[ //标题栏
				       {type:'numbers',fixed:'left',title:'序号'}
				      ,{field: 'CODE', title: '编号',align:'center',sort: true, event: 'CODE'}
				      ,{field: 'NAME', title: '名称',align:'center',sort: true, event: 'NAME'}
				    ]]
					,limit: 10000
				    ,data: data
				    ,page: false //是否显示分页
				    ,done: function(res, curr, count) {
// 						_self.bpSelData = res.data;
					}
				});
				table.on('tool(bpSelFilter)', function(obj){
					_self.selBpRow = obj.data;	//当前行数据
				});
			});
		},
		getBadProductData: function() {
			var _self = this;
			_self.$nextTick(function() {
				this.$http.post("../../spc/ckConfig/getBadProductData",{
					configId : _self.configId
				},{emulateJSON: true}).then(function(res){
// 					_self.exceRuleData = res.body.erData;
					_self.bpData = res.body.bpData;
					_self.bpSelData = res.body.bpSelData;
					_self.$options.methods.renderBpTable(_self, res.body.bpData);
					_self.$options.methods.renderBpSelTable(_self, res.body.bpSelData);
				});
			});
		},
		//选择一个不良到右侧table
		optBp: function(opt) {
			var _self = this;
			var bpData = _self.bpData;
			var bpSelData = _self.bpSelData;
			var rowL = _self.unselBpRow;
			var rowR = _self.selBpRow;
			if(opt === "selOne"){
				if(rowL){
					bpSelData.push(rowL);
					_self.bpData = _.pullAllBy(bpData, [rowL], "EMESQ_QUALITY_POOR_REASON_ID");
				} else {
					layer.msg("请先选择一行！");
				}
			}
			if(opt === "unselOne"){
				if(rowR){
					bpData.push(rowR);
					_self.bpSelData = _.pullAllBy(bpSelData, [rowR], "EMESQ_QUALITY_POOR_REASON_ID");
				} else {
					layer.msg("请先选择一行！");
				}
			}
			if(opt === "selAll"){
				_self.bpData = [];
				_self.bpSelData = _.concat([], bpSelData, bpData);
			}
			if(opt === "unselAll"){
				_self.bpData = _.concat([], bpSelData, bpData);
				_self.bpSelData = [];
			}
			layui.use(['table'], function(){
				var table = layui.table;
				table.reload("bpTable", {
					data: _self.bpData
				});
				table.reload("bpSelTable", {
					data: _self.bpSelData
				});
				_self.unselBpRow = null;
				_self.selBpRow = null;
			});
		},
        openImportExcelWin:function(row){
		    var _self = this;
            var layer = layui.layer;
            var indexReceiveWindow = layer.open({
                type : 1,
                title : '上传Excel',
                id : 'sssss',
                shadeClose : true,
                skin: 'layui-layer-lan',
                shade : 0.8,
                area : [ '40%', '38%' ],
                content : $('#confirmUploadExcelDiv')
                ,cancel: function(){
                    window.location.reload();
                }
                ,success: function(layero, index){
                    $("#downloadTemplate").unbind();
                    $("#downloadTemplate").bind("click",function () {
                        window.open("../../spc/ckConfig/downloadExcelTemplate?configId="+row.CONFIGID,"hideIframe");
                    });
                    layui.use('upload', function(){
                        var upload = layui.upload;
                        //执行实例
						var index;
                        var uploadInst = upload.render({
                            elem: '#test1' //绑定元素
                            ,url: '../../spc/ckConfig/parseExcelData' //上传接口
                            ,data:{configId:row.CONFIGID,sampleSize:row.SAMPLE_VOLUME,isSampleData:0}
                            ,accept: 'file' //允许上传的文件类型
                            ,exts:'xls|xlsx'
                            ,field:'uploadExcel'
                            ,auto:false
                            ,bindAction:'#confirmUpload'
                            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                                index = layer.load(); //上传loading
                                var tempS = $("#isSampleData:checked").val();
                                if(!tempS)tempS=0;
                                this.data.isSampleData=tempS;
                            }
                            ,done: function(res){
                                //window.location.reload();
                                //上传完毕回调
                                layer.msg(res.msg,{time:3000});
                                layer.close(index);
                                layer.close(indexReceiveWindow);
                            }
                            ,error: function(){
                                //window.location.reload();
                                //请求异常回调
                                layer.msg("上传异常，请稍后再试！",{time:3000});
                                layer.close(index);
                                layer.close(indexReceiveWindow);
                            }
                        });
                    });
                }
            });
        },
        deleteSampleData:function(row){
        	var configId = row.CONFIGID;
        	var _self = this;
			_self.$nextTick(function() {
				this.$http.post("../../spc/ckConfig/deleteSampleData",{
					configId : configId
				},{emulateJSON: true}).then(function(res){
					layer.msg(res.body.msg,{time:3000});
				});
			});
        },
        deleteData:function(row){
        	var configId = row.CONFIGID;
        	var _self = this;
			_self.$nextTick(function() {
				this.$http.post("../../spc/ckConfig/deleteData",{
					configId : configId
				},{emulateJSON: true}).then(function(res){
					layer.msg(res.body.msg,{time:3000});
					_self.$options.methods.searchData(_self);
				});
			});
        },
		closeConfigWin: function(isFresh) {
			layer.close(this.configWin);
			isFresh && this.searchData(this);
		}
	}
});
</script>
</html>